﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span>关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li>
            <li id="price0">¥21.90</li>
            <li><p>移入收藏</p><p>删除</p></li>
        </ul>
        <ul>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li>
            <li id="price1">¥24.00</li>
            <li><p>移入收藏</p><p>删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span>结 算</span></li>
        </ol>
    </div>
</div>

<script>
    //获得所有+的按钮
     var plusbtns = document.getElementsByName("plus");
     var minusbtns = document.getElementsByName("minus");
     var prices = document.getElementsByName("price");
     //获得所有产品数量的文本框
    var amounts = document.getElementsByName("amount");
    var totalPrice = document.getElementById("totalPrice");


    //计算总价的函数
    function calcTotal(){
        //首先声明一个临时变量，初值为0
        var total = 0;
        //现在界面有两个单价，就是这个循环要循环两次
        for(var k=0;k<prices.length;k++){
            //获得相应的价格元素
            var p = document.getElementById("price"+k);
            //累加得到总价
            total = total + parseFloat(p.innerHTML.substring(1));
        }

        //将得到总价数显示在totalPrice元素中
        totalPrice.innerHTML = "&yen;"+toround(total);
    }

    //网页加载到此处，先计算总价
    calcTotal();

    //对于每一个+按钮
    for(var i=0;i<plusbtns.length;i++){
        //给这个按钮附加一个新属性名为xuhao，用于记住其序号
        plusbtns[i].xuhao = i;
        //当单击某一个+按钮时
        plusbtns[i].onclick = function(){
            //取出当前按钮序号
            var j = this.xuhao;
            //将其对应的数量文本框的值自增1
            amounts[j].value = parseInt(amounts[j].value) + 1;
            var price = document.getElementById("price"+j);
            price.innerHTML = "&yen;"+
                toround(amounts[j].value * prices[j].value);

            calcTotal();

        };
    }

    //对于每一个+按钮
    for(var i=0;i<minusbtns.length;i++){
        //给这个按钮附加一个新属性名为xuhao，用于记住其序号
        minusbtns[i].xuhao = i;
        //当单击某一个+按钮时
        minusbtns[i].onclick = function(){
            //取出当前按钮序号
            var j = this.xuhao;
            //防止订单数量小于1
            if(parseInt(amounts[j].value)>1){
                //将其对应的数量文本框的值自增1
                amounts[j].value = parseInt(amounts[j].value) - 1;
                var price = document.getElementById("price"+j);
                price.innerHTML = "&yen; "+
                    toround(amounts[j].value * prices[j].value);

                calcTotal();
            }
        };
    }

    function toround(j){
        j  = Math.round(j*100)/100;
        if((j+"").indexOf(".")==-1){
            return j+".00";
        }else{
            return j+"0";
        }
    }
</script>

</body>
</html>

